<script setup lang="ts">
import { ref } from 'vue';
import { showToast } from 'vant';
import { useRouter } from 'vue-router';

const search = ref('');
const router = useRouter();

const onSearch = (value: string) => {
    if (!value.trim()) {
        showToast('请输入搜索关键词');
        return;
    }
    
    // 这里实现搜索功能，可以跳转到搜索结果页或直接在当前页过滤
    console.log('搜索:', value);
    
    // 跳转到假设的搜索结果页
    // router.push({
    //     name: 'CommunitySearch',
    //     query: { keyword: value }
    // });
}
</script>

<template>
    <div class="search-container">
        <van-search
            v-model="search"
            shape="round"
            show-action
            placeholder="搜索社区和帖子"
            clearable
            @search="onSearch"
        >
            <template #action>
                <div class="search-btn" @click="onSearch(search)">搜索</div>
            </template>
        </van-search>
    </div>
</template>

<style lang="scss" scoped>
.search-container {
    .search-btn {
        padding: 0 16px;
        font-size: 14px;
        color: #1989fa;
        cursor: pointer;
        
        &:hover {
            color: #0570db;
        }
    }
    
    :deep(.van-search__content) {
        background-color: #f5f5f5;
    }
}
</style>